ECMAScript 6 新特性
部署进度
目前ES6的支持度已经越来越高了,超过90%的 ES6 语法特性都实现了。关于各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。
Node 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node 已经实现的 ES6 特性。
$ node --v8-options | grep harmony
上面命令的输出结果,会因为版本的不同而有所不同。
使用阮一峰写的工具ES-Checker用来检查各种运行环境对 ES6 的支持情况。访问ruanyf.github.io/es-checker,可以看到您的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。
$ npm install -g es-checker
$ es-checker
=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================
ES6新特性
let和const关键字
可以把let看成是var,但是let定义的变量被限定在了特定范围内才能使用,而离开了这个范围则无效。
const很直观,用来定义常量,定义的时候必须初始化,不能留到以后再赋值,且与let相同,不存在声明提升,不可重复声明,只在声明所在的块级作用域内有效。more
for(let i = 0; i < 3; i++)console.log(i); // 0,1,2
console.log(i); // undefined,严格模式下会报错
箭头操作符
ES6中新增加了箭头操作符 => 简化了函数function的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值:Inputs => outputs
js中的回调函数,每次都需要写function,而引入箭头操作符后可以方便的回调了:// 数组遍历的几种方法 var arr = [1,2,3]; // 传统写法 arr.forEach(function(v,i,a){ console.log(v); }) // ES6 arr.forEach(v => console.log(v)); // for of for(v of arr){ console.log(v); }
类的支持
ES6中添加了对类的支持,引入了class关键字(之前就是保留字),js本身就是面向对象的,ES6中提供的类实际上只是js原型模式的包装。而现在提供原生的class支持后,有两个好处:
- 1.对象的创建、继承就更加直观了,
- 2.父类方法的调用、实例化、静态方法和构造函数等概念都更加形象化。
class Animal {
// es6中新的构造器
constructor(name){
this.name = name;
}
// 实例方法
sayName(){
console.log('my name is' + this.name);
}
}
// 类的继承
class Programmer extends Animal{
constructor(name){
// 直接调用父类的构造器进行初始化
super(name);
}
// 自己的方法
program(){
console.log('我是一只老鼠');
}
}
// 测试
var animal = new Animal('Tom');
animal.sayname(); // my name is Tom;
var aniaml2 = new Programmer('Jerry');
// 父类所有的方法,继承者都可以打点调用
animal2.sayName(); // my name is Jerry;
animal2.program(); // 我是一只老鼠
for of 值遍历
for in循环用于遍历数组、类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。
var arr = [1,2,3]; for(v in arr){ console.log(v); // 0,1,2 输出的是索引 } for(v of arr){ console.log(v); // 1,2,3 输出的是值 }
Promise
Promise是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred对象,当你发起一个异步请求,并绑定了.wnhe(),.done()等事件处理程序时,其实就是在应用promise模式。
// 创建promise
var promise = new Promise(function(resolve,reject){
if(/*条件语句*/){
resolve('yes');
}else{
reject(Error('no'));
}
})
// 绑定处理程序
promise.then(function(result){
// promise成功执行的语句
console.log(result); // yes
},function(err){
// promise失败执行的语句
console.log(err); // no
})
增强的对象字面量
ES6中对象字面量增强了,写法更加简洁与灵活,同时在定义对象的时候能够做更多的事情,具体表现:
- 可以在对象字面量里面定义原型
- 定义方法可以不用function关键字
- 直接调用父类方法
与上面提到的类的概念更加吻合,编写js面向对象时更加方便。
// 通过对象字面量创建对象
var human = {
breathe() {
console.log('呼吸...');
}
};
var worker = {
// 设置此对象的原型为human,相当于继承human
__proto__ : human,
company : 'BAT',
work() {
console.log('我在工作...');
}
};
human.breathe(); // 呼吸...
// 调用继承来的方法
worker.breathe(); // 呼吸...
worker.work(); // 我在工作...
默认参数值
现在可以在定义函数的时候指定参数的默认值
function sayHello(name){
// 传统方式用或操作符来完成
var name = name || 'Tom';
console.log('Hello' + name);
}
// ES6的形式:
function sayHello2(name='Jerry'){
console.log(`Hello ${name}`);
// 双反引号``是es6中的字符串模板,$配合{}来使用
}
sayHello(); // Hello Tom
sayHello('汤姆'); // Hello 汤姆
sayHello2(); // Hello Jerry
sayHello2('杰瑞'); // Hello 杰瑞